<template>
    <div class="container">
        <u-form :model="form" ref="uForm" label-width="70px">
            <div class="item">
                <u-form-item label="项目名称" prop="projectName" required :label-style="{color: '#0c3b96'}">
                    <u-input v-model="form.projectName" placeholder="请输入项目名称" />
                </u-form-item>
            </div>
            <div class="item">
                <u-form-item label="项目地址" prop="address" required :label-style="{color: '#0c3b96'}">
                    <u-input v-model="form.address" placeholder="请输入项目地址" />
                </u-form-item>
            </div>
            <div class="item">
                <u-form-item label="企业名称" prop="firmName" required :label-style="{color: '#0c3b96'}">
                    <u-input v-model="form.firmName" placeholder="请输入企业名称" />
                </u-form-item>
            </div>
            <div class="item">
                <u-form-item label="联络员" prop="name" required :label-style="{color: '#0c3b96'}">
                    <u-input v-model="form.name" placeholder="请输入联络员姓名" />
                </u-form-item>
            </div>
            <div class="item">
                <u-form-item label="联系电话" prop="phone" required :label-style="{color: '#0c3b96'}">
                    <u-input type="number" v-model="form.phone" placeholder="请输入联系电话" />
                </u-form-item>
            </div>
            <div class="item">
                <u-form-item label="代办事项" prop="content" required :label-style="{color: '#0c3b96'}">
                    <div class="content-box">
                        <u-input class="content-input" v-model="form.content" type="textarea" auto-height :maxlength="1000" placeholder="请输入代办事项及诉求" />
                        <u-button class="content-btn" size="mini" type="primary" @click="show = true">选择</u-button>
                    </div>
                </u-form-item>
            </div>
            <div class="item">
                <u-form-item label="是否公开" required :label-style="{color: '#0c3b96'}">
                    <u-radio-group v-model="form.isOpen">
                        <u-radio shape="circle" :name="true" icon-size="30">是</u-radio>
                        <u-radio shape="circle" :name="false" icon-size="30">否</u-radio>
                    </u-radio-group>
                </u-form-item>
            </div>
            <div class="item">
                <u-form-item label="附件" :label-style="{color: '#0c3b96'}">
                    <div class="file-tips">上传附件不能超过20M，最多上传5个</div>
                    <div class="file-list">
                        <div class="file-item" v-for="(item, index) in fileList" :key="index">
                            <img class="file-img" :src="item.type === 'image' ? item.url : 'https://tuanfeng.whkxzj.com/profile/static/20230109160415-file.png'" />
                            <div class="file-name">{{item.name}}</div>
                            <img class="file-delete" src="https://tuanfeng.whkxzj.com/profile/static/20230109160503-delete.png" @click="remove(index)" />
                        </div>
                    </div>
                    <u-button v-if="fileList.length < 5" type="primary" size="mini" ripple @click="choose">上传附件</u-button>
                </u-form-item>
            </div>
        </u-form>
        <div class="tips">
            <div>团风县“项目帮代办”专区位于县政务服务中心一楼，为落户在团风的企业，提供项目从立项到开工的全过程、无偿性的帮代办服务。</div>
            <div>“帮代办”服务热线：0713-6011399，欢迎您的致电！</div>
        </div>
        <u-button class="btn" type="primary" ripple shape="circle" @click="submit">提交</u-button>

        <u-select v-model="show" :list="list" @confirm="confirm"></u-select>
    </div>
</template>
<script>
import { submitEnterpriseAPI, getFirmAgentAPI } from "../api/agency";

export default {
    data() {
        return {
            form: {
                projectName: "",
                address: "",
                firmName: "",
                name: "",
                phone: "",
                content: "",
                isOpen: true,
            },
            show: false,
            list: [],
            fileList: [
                // {
                //     name: "delete.png",
                //     type: "image",
                //     url: "",
                // },
            ],
            questionTypeList: [],
            rules: {
                projectName: [
                    {
                        required: true,
                        message: "请输入项目名称",
                        trigger: ["blur"],
                    },
                ],
                address: [
                    {
                        required: true,
                        message: "请输入企业地址",
                        trigger: ["blur"],
                    },
                ],
                firmName: [
                    {
                        required: true,
                        message: "请输入企业名称",
                        trigger: ["blur"],
                    },
                ],
                name: [
                    {
                        required: true,
                        message: "请输入联络员姓名",
                        trigger: ["blur"],
                    },
                ],
                phone: [
                    {
                        required: true,
                        message: "请输入联系电话",
                        trigger: ["blur"],
                    },
                ],
                content: [
                    {
                        required: true,
                        message: "请输入代办内容",
                        trigger: ["blur", "change"],
                    },
                ],
            },
        };
    },
    onShareAppMessage() {},
    onLoad() {
        getFirmAgentAPI().then(res => {
            let list = res.data.map(item => {
                return {
                    label: item.name,
                    value: item.id
                }
            })
            this.list = list.filter(item => item.label !== '其他')
        })
    },
    methods: {
        confirm(val) {
            this.form.content = val[0].label
        },
        submit() {
            this.$refs.uForm.validate((valid) => {
                if (valid) {
                    submitEnterpriseAPI({ 
                        ...this.form,
                        fileUrls: this.fileList.map((item) => item.url),
                     }).then((res) => {
                        wx.showToast({
                            title: "提交成功",
                            icon: "success",
                        });
                        setTimeout(() => {
                            this.$u.route({ type: "back" });
                        }, 1500);
                    });
                }
            });
        },
        remove(index) {
            this.fileList.splice(index, 1);
        },
        choose() {
            wx.chooseMessageFile({
                count: 5 - this.fileList.length,
                type: "all",
                success: (res) => {
                    const tempFilePaths = res.tempFiles;
                    console.log(tempFilePaths[0].path);
                    let requestList = [];

                    tempFilePaths.forEach((item, index) => {
                        let promise = new Promise((resolve, reject) => {
                            wx.uploadFile({
                                url: "https://tuanfeng.whkxzj.com/file/upload",
                                filePath: tempFilePaths[index].path, //本地地址
                                name: "file",
                                success: (res) => {
                                    resolve(res);
                                },
                                fail: (err) => {
                                    reject(err);
                                },
                            });
                        });
                        requestList.push(promise);
                    });

                    wx.showLoading({
                        title: "上传中...",
                    });
                    Promise.all(requestList)
                        .then((res) => {
                            res.forEach((item) => {
                                console.log(item);
                                if (item.statusCode === 200) {
                                    let data = JSON.parse(item.data) || {};
                                    if (data.code === 200) {
                                        this.fileList.push(data.data);
                                    } else {
                                        throw new Error(JSON.stringify(item));
                                    }
                                } else {
                                    throw new Error(JSON.stringify(item));
                                }
                            });
                            wx.hideLoading();
                        })
                        .catch((err) => {
                            console.log("上传错误", err);
                            wx.showToast({
                                title: "上传错误",
                                icon: "error",
                            });
                        });
                },
            });
        },
    },
    // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
    onReady() {
        this.$refs.uForm.setRules(this.rules);
    },
};
</script>
<style scoped lang="scss">
@import "../assets/scss/common.scss";

.container {
    position: relative;
    padding: 5px 20px;
    min-height: 100vh;
    box-sizing: border-box;
    padding-bottom: 100px;
    .item {
        border-bottom: 1px solid #efefef;
        .content-box{
            display: flex;
            align-items: center;
            .content-input{
                width: 80%;
                flex: auto;
                margin-right: 15px;
            }
            .content-btn{
                width: 20%;
                flex: none;
            }
        }
        .file-tips {
            font-size: 12px;
            color: $color_secondary-text;
        }
        .file-list {
            .file-item {
                display: flex;
                align-items: center;
                margin: 10px 0;
                .file-img {
                    flex: none;
                    width: 50px;
                    height: 50px;
                    margin-right: 10px;
                }
                .file-name {
                    flex: auto;
                    font-size: 12px;
                    line-height: 20px;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 3;
                    overflow: hidden;
                    word-break: break-all;
                }
                .file-delete {
                    flex: none;
                    width: 30px;
                    height: 30px;
                    margin-left: 10px;
                    opacity: 0.8;
                }
            }
        }
    }
    .btn {
        position: absolute;
        left: 30px;
        right: 30px;
        bottom: 20px;
    }
    .tips {
        margin-top: 20px;
        font-size: 15px;
        div {
            text-indent: 1em;
        }
    }
}
</style>
